<template>
  <view class="content">
    <view>
      <swiper class="swiper" circular indicator-dots="true" indicator-color="#fff" indicator-active-color="#999999"
        autoplay="true" interval="6000" duration="3000">
        <swiper-item v-for="(item,index) in carouselList" :key="item.id">
          <image :src="item.imageUrl" mode="scaleToFill" />
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    onMounted
  } from 'vue'
  import * as http from '@/utils/http'
  
  const carouselList=ref([])
  
  onMounted(async() => {
    let param = {
      pageNo: 1,
      pageSize: 10
    }
    const carouselResult =await http.getRequest("/xhyy/carousel/page", param)
    if(carouselResult.code==0){
       carouselList.value = carouselResult.data.list
    }else{
      uni.showToast({
       title: '获取轮播图失败',
       icon: 'error',
       duration: 1000
      })
    }
  })
</script>

<style lang="scss" scoped>

  .swiper {
    height: 340rpx;
    width: 730rpx;
    margin: auto;
    
    swiper-item {
      border-radius: 25rpx;
      background-color: #C4C4C4FF;
      box-shadow: 0px 2px 10px #0000004C;

      image {
        border-radius: 25rpx;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>